<template>
  <div
    class="flex flex-col justify-center py-12 sm:px-6 lg:px-8 bg-gray-darkest"
  >
    <div class="sm:mx-auto sm:w-full sm:max-w-[630px]">
      <div class="bg-white py-5 px-10 sm:rounded text-black-70">
        <h3 class="text-xl text-black text-center mb-7">Forget Password</h3>
        <!---->
        <p class="text-center mb-7 text-sm">
          Please enter your account number below and you will receive a
          verification message to reset your password later.
        </p>
        <form method="POST">
          <div>
            <div
              role="tablist"
              aria-orientation="horizontal"
              class="flex divide-x font-normal leading-none mb-2.5 divide-[#c4c4c4]"
            >
              <div
                id="headlessui-tabs-tab-79"
                role="tab"
                aria-selected="true"
                tabindex="0"
                aria-controls="headlessui-tabs-panel-81"
              >
                <label
                  for="mobile"
                  class="block px-2.5 -ml-2.5 cursor-pointer text-yellow"
                  >手机号找回</label
                >
              </div>
              <div
                id="headlessui-tabs-tab-80"
                role="tab"
                aria-selected="false"
                tabindex="-1"
              >
                <label for="email" class="block px-2.5 cursor-pointer"
                  >邮箱找回</label
                >
              </div>
            </div>
            <div
              id="headlessui-tabs-panel-81"
              role="tabpanel"
              aria-labelledby="headlessui-tabs-tab-79"
              tabindex="0"
            >
              <div class="relative">
                <div class="absolute inset-y-0 left-0 flex items-center">
                  <label for="country" class="sr-only">Country</label
                  ><select
                    id="country"
                    name="country"
                    class="focus:outline-none focus:ring-yellow focus:border-yellow h-full py-0 pl-3 pr-7 border-transparent bg-transparent text-gray-500 sm:text-sm rounded-md"
                  >
                    <option value="86">+86</option>
                    <option value="1">+1</option>
                    <option value="61">+61</option>
                    <option value="82">+82</option>
                  </select>
                </div>
                <input
                  id="mobile"
                  name="mobile"
                  type="text"
                  autocomplete="mobile"
                  required=""
                  placeholder="请输入手机号"
                  class="focus:outline-none focus:ring-yellow py-3.5 focus:border-yellow block w-full pl-16 sm:text-sm rounded-md border-gray-light"
                />
              </div>
              <!---->
              <div class="mt-5">
                <label for="code" class="block mb-2.5 leading-none"
                  >验证码</label
                >
                <div class="md:flex md:space-x-2.5 space-y-5 md:space-y-0">
                  <div class="flex-1">
                    <input
                      type="number"
                      id="code"
                      name="code"
                      required=""
                      placeholder="请输入手机短信验证码"
                      class="appearance-none block w-full h-full px-3 py-3.5 border rounded-md focus:outline-none focus:ring-yellow focus:border-yellow sm:text-sm disabled:bg-gray-darkest disabled:text-black-50 border-gray-light"
                    />
                    <p class="text-red-500 text-sm mt-1 absolute"></p>
                  </div>
                  <button
                    type="button"
                    class="rounded no-underline border flex items-center justify-center bg-transparent text-black-85 border-yellow py-2 px-3 sm:px-4 text-xs sm:text-base bg-variants-primary flex-shrink-0 text-yellow min-w-[160px] h-full w-full md:w-auto"
                  >
                    <div>获取</div>
                    <!---->
                  </button>
                </div>
              </div>
            </div>
            <!---->
          </div>
          <div class="mt-7 space-y-5">
            <button
              type="submit"
              class="rounded no-underline border flex items-center justify-center shadow text-black-85 border-transparent hover:bg-yellow-light active:shadow-yellow py-2 px-3 sm:px-4 text-xs sm:text-base bg-variants-primary w-full"
            >
              <div>
                <div class="flex items-center justify-center">
                  <span>reset passwords</span
                  ><!---->
                </div>
              </div>
              <!---->
            </button>
          </div>
        </form>
        <div class="mt-7 text-center">
          <router-link to="/sign-in" class="text-[#4575F4] underline"
            >返回登录界面</router-link
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  mixins: [],
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {},
};
</script>
<style lang="" scoped></style>
